/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';

@grid-prefix-cls: ~'@{css-prefix}grid';
@grid-filter-prefix-cls: ~'@{css-prefix}grid-filter';
@grid-filter-wrapper-prefix-cls: ~'@{css-prefix}grid-filter-wrapper';
@grid-radio-prefix-cls: ~'@{css-prefix}grid-radio';

// 筛选
.@{grid-filter-wrapper-prefix-cls} {
  padding-left: 4px;

  &.is__active {
    .@{grid-filter-prefix-cls}__btn {
      fill: var(--tv-Grid-icon-color-active);
    }
  }

  .@{grid-filter-prefix-cls}__btn {
    // 图标过大，需要减去2px
    font-size: calc(var(--tv-Grid-icon-size) - 2px);
    fill: #999;
    cursor: pointer;
    vertical-align: middle;

    &:hover {
      fill: var(--tv-Grid-icon-color-hover);
    }
  }
}

.filter__active {
  .@{grid-filter-wrapper-prefix-cls} {
    .@{grid-filter-prefix-cls}__btn {
      fill: var(--tv-Grid-icon-color-active);
    }
  }
}

// 筛选容器
.@{grid-prefix-cls}__filter-wrapper {
  display: none;
  position: absolute;
  min-width: 270px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  font-size: var(--tv-Grid-font-size);
  z-index: 4000;

  &.filter__active {
    display: block;
  }

  .@{grid-prefix-cls}__filter-body {
    padding: 10px;
    list-style-type: none;
    background-color: var(--tv-Grid-bg-color);
    overflow-x: hidden;
    overflow-y: auto;

    input {
      &:not([type='radio'], [class*='tiny-']) {
        border: 1px solid var(--tv-Grid-input-border-color);
        border-radius: var(--tv-Grid-input-border-radius);
        color: var(--tv-Grid-input-text-color);
        background-color: var(--tv-Grid-input-bg-color);
        font-size: var(--tv-Grid-input-font-size);
        height: var(--tv-Grid-input-height);
        line-height: var(--tv-Grid-input-height);
        padding: var(--tv-Grid-input-padding-x) var(--tv-Grid-input-padding-y);
        outline: 0;
        display: inline-block;
        box-sizing: border-box;
        appearance: none;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        margin-right: 24px;

        &:hover,
        &:focus,
        &:active {
          outline: 0;
          border-color: var(--tv-Grid-input-border-color-hover);
        }
      }
    }

    button {
      font-weight: var(--tv-Grid-button-font-weight);
      border: 1px solid var(--tv-Grid-button-border-color-default);
      line-height: var(--tv-Grid-button-line-height);
      border-radius: var(--tv-Grid-button-border-radius);
      font-size: var(--tv-Grid-button-font-size);
      height: var(--tv-Grid-button-height);
      color: var(--tv-Grid-button-text-color-default);
      padding: 0 var(--tv-Grid-button-padding-x);
      background-color: var(--tv-Grid-button-bg-color-default);
      margin-left: 0;
      margin-right: 24px;

      &:hover,
      &:active {
        border-color: var(--tv-Grid-button-border-color-active-default);
      }
    }

    .@{grid-prefix-cls}__filter-panel {
      margin: 0;
      width: 100%;
      padding: 12px 8px 8px;
      border-bottom: solid 1px var(--tv-Grid-border-color-divider);

      .@{grid-prefix-cls}__filter-search {
        margin-bottom: 4px;

        .tiny-input__inner {
          border-width: 0;
          background-color: var(--tv-Grid-filter-bg-color);
          padding-right: 54px;
          padding-left: 8px;
        }
      }

      &.filter-panel__default {
        padding: 8px 20px 4px;
      }

      &.filter-panel__default,
      &.filter-panel__clear {
        padding-left: 0;
        padding-right: 0;

        .@{grid-prefix-cls}__filter-option {
          cursor: pointer;
          padding-left: 16px;

          &:hover {
            background-color: var(--tv-Grid-filter-bg-color-hover);
          }
        }
      }

      &.filter-panel__enum {
        padding-top: 4px;

        .@{grid-prefix-cls}__filter-options {
          max-height: 170px;
          overflow: auto;

          .@{grid-prefix-cls}__filter-empty {
            text-align: center;
            line-height: 30px;
            color: var(--tv-Grid-text-color);
          }

          .@{grid-prefix-cls}__filter-option {
            height: 28px;
            line-height: 28px;
            padding: 0 8px;
            max-width: 240px;
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &.selected {
              background-color: var(--tv-Grid-filter-bg-color);
            }

            svg {
              font-size: var(--tv-Grid-checkbox-icon-size);
              fill: var(--tv-Grid-checkbox-icon-color);
              margin-right: 8px;
              outline: none;
              vertical-align: middle;

              path:first-child {
                fill: transparent;
              }

              &.is-checked {
                fill: var(--tv-Grid-checkbox-icon-color-selected);

                path:first-child {
                  fill: var(--tv-Grid-checkbox-icon-color-selected);
                }

                path:last-child {
                  fill: #fff;
                }
              }

              &:hover {
                fill: var(--tv-Grid-checkbox-icon-color-hover);
              }
            }
          }
        }
      }

      .@{grid-prefix-cls}__filter-option {
        margin: 0;
        height: 24px;
        line-height: 24px;

        a {
          color: var(--tv-Grid-text-color);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
        }

        &.filter-option__radios {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-around;

          label.@{grid-radio-prefix-cls} {
            width: auto;
            display: inline-block;

            .@{grid-radio-prefix-cls}__label {
              color: var(--tv-Grid-text-color);
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              width: auto;
              max-width: 80%;
            }

            & + .@{grid-radio-prefix-cls} {
              margin-left: 0;
            }

            &:nth-child(2) {
              text-align: center;
            }

            &:nth-child(3) {
              text-align: right;
            }
          }
        }

        &.filter-option__btns {
          margin: 8px 0 16px;
          text-align: center;
        }
      }

      &.filter-panel__simple {
        padding: 0;

        .@{grid-prefix-cls}__filter-option {
          &.filter-option__btns {
            padding: 10px 0;
            margin: 0 10px;
            border-top: 1px solid var(--tv-Grid-border-color-divider);
            text-align: center;
            height: auto;
          }
        }
      }
    }

    .filter-option__input > input {
      width: 100%;
      border: solid 1px var(--tv-Grid-border-color);
      border-radius: var(--tv-Grid-filter-input-border-radius);
      outline: none;
      padding: 0 8px;
      box-sizing: border-box;
      line-height: inherit;
      height: 30px;
      background: var(--tv-Grid-filter-input-bg-color);

      &:focus {
        border: 1px solid var(--tv-Grid-filter-input-border-color-hover);
      }
    }
  }
}

.@{grid-prefix-cls}__filter-simple {
  background-color: white;

  min-width: 80px;

  .@{grid-prefix-cls}__filter-body {
    .filter-panel__simple {
      border-bottom: none;

      .@{grid-prefix-cls}__filter-date-title {
        padding: 10px;
        color: var(--tv-Grid-text-color-weaken);
      }

      .@{grid-prefix-cls}__filter-date {
        padding: 0 10px;
        min-width: 270px;

        .@{grid-prefix-cls}__filter-date-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          color: var(--tv-Grid-text-color);

          .@{grid-prefix-cls}__filter-date-pick {
            width: 160px;
          }
        }
      }

      .@{grid-prefix-cls}__filter-option {
        &.filter-option__date-button.filter-option__btns {
          text-align: right;
        }
      }
    }
  }
}
